import React from "react";
var webgl = null;
var vertexShaderObject = null;
var fragmentShaderObject = null;
var programObject = null;
var triangleBuffer = null;
var indexBuffer = null;
var indexSize = 0;

var v3PositionIndex;
var attrColor;
var attrUV;
var attrNormal;

var uniformProj;
var uniformTexture;
var uniformNor;
var uniformMV;
var uniformAmbient;
var uniformLightPos;
var uniformLightColor;
var textureHandle;

var projectMat      =   mat4.create();
var viewMat         =   mat4.create();

var cameraEye       =   new Float32Array(3);
var cameraCenter    =   new Float32Array(3);
var cameraUp        =   new Float32Array(3);
var cameraLookAt    =   new Float32Array(3);
var cameraRight     =   new Float32Array(3);
var radius          =   40;
var viewPortW       =   0;
var viewPortH       =   0;

var texWidth = 0;
var texHeigh = 0;
var times   =   (new Date()).valueOf();

var role = {};
role._position  =   new Float32Array(3);
role._target    =   new Float32Array(3);
role._speed = 5;

function rangeRandom(fLow, fHigh)
{
    return (fHigh - fLow) * Math.random() + fLow;
}

function Node (pos,radius)
{
    this._pos = pos;
    this._radius = radius;
}




function Plane(x, y, z, o)
{
    this._normal    =   vec3.create();
    this._distance = 0.0;
    this._normal[0] = x;
    this._normal[1] = y;
    this._normal[2] = z;
    this._distance = o;

    this.distance = function(pos)
    {
        return vec3.dot(this._normal, pos) + this._distance;
    }
}

function Frustum() {
    this._planes = new Array();
   
    this.load = function (dataPtr)
    {
        this._planes[0] = new Plane(dataPtr[12] - dataPtr[0], dataPtr[13] - dataPtr[1], dataPtr[14] - dataPtr[2], dataPtr[15] - dataPtr[3]);
        this._planes[1] = new Plane(dataPtr[12] + dataPtr[0], dataPtr[13] + dataPtr[1], dataPtr[14] + dataPtr[2], dataPtr[15] + dataPtr[3]);

        this._planes[2] = new Plane(dataPtr[12] - dataPtr[4], dataPtr[13] - dataPtr[5], dataPtr[14] - dataPtr[6], dataPtr[15] - dataPtr[7]);
        this._planes[3] = new Plane(dataPtr[12] + dataPtr[4], dataPtr[13] + dataPtr[5], dataPtr[14] + dataPtr[6], dataPtr[15] + dataPtr[7]);

        this._planes[4] = new Plane(dataPtr[12] - dataPtr[8], dataPtr[13] - dataPtr[9], dataPtr[14] - dataPtr[10], dataPtr[15] - dataPtr[11]);
        this._planes[5] = new Plane(dataPtr[12] + dataPtr[8], dataPtr[13] + dataPtr[9], dataPtr[14] + dataPtr[10], dataPtr[15] + dataPtr[11]);

    }
    this.sphereInFrustum = function(pos,radius)
    {
        for (var i = 0; i < 6; i++)
        {
            if (this._planes[i].distance(pos) <= -radius)
                return false;
        }
        return true;
    }
}

var nodeArray = new Array();


function getShaderSource(scriptID) {
    var shaderScript = document.getElementById(scriptID);
    if (shaderScript == null) return "";

    var sourceCode = "";
    var child = shaderScript.firstChild;
    while (child) {
        if (child.nodeType == child.TEXT_NODE) sourceCode += child.textContent;
        child = child.nextSibling;
    }

    return sourceCode;
}

function calcDir() {

    vec3.subtract(cameraCenter, cameraEye, cameraLookAt);
    vec3.normalize(cameraLookAt, cameraLookAt);
}
function updateCamera() {

    cameraEye[0] = cameraCenter[0] - cameraLookAt[0] * radius;
    cameraEye[1] = cameraCenter[1] - cameraLookAt[1] * radius;
    cameraEye[2] = cameraCenter[2] - cameraLookAt[2] * radius;
    // ! 规格化up坐标
    var upDir = vec3.normalize(cameraUp);

    mat4.lookAt(cameraEye,cameraCenter,upDir,viewMat);

}
export default class Cut extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          count: 0,
        };
      }
      init(){


      }
      render() {
        const style = {
          border: "1px solid red",
        };
        return (
          <div>
             <canvas id="myCanvas" 
            style={style}
             width='1024' height='768'></canvas>
          </div>
        );
      }
}